<script>
import { ref, onMounted, reactive } from "vue";
import axios from 'axios';
import { useRouter } from 'vue-router';


export default {
    setup() {
        const router = useRouter()
        const handleSetting = () => {
            // store.clean()
            router.push('/nSetting')
        }
        const getImageUrl = (user) => {
            return new URL(`../assets/images/${user}.png`, import.meta.url).href
        } ;
        
        const cards = reactive([]);
        const loading = ref(true);
        

        onMounted(async () => {
            try {
                const res = await axios.get('/api/navigation/getNCardData');
                if (res.status === 200) {
                    // cards.value = res.data.cards;
                    cards.push(...res.data.cards); // 或者直接赋值 cards = res.data.cards，取决于后端返回的数据结构  

                }
            } catch (error) {
                console.error('Error fetching card data:', error);
            } finally {
                loading.value = false;
            }
        });

        return {
            cards,
            loading,
            getImageUrl,
            handleSetting,
        };
    }
};  

</script>

<template>
    <!-- <el-col :span="7" style="margin-top: 20px"> -->
    <div class="card-container">
        
        <el-card @click="handleSetting" shadow="hover" v-for="card in cards" :key="card.id" class="card-item">
            <h3>{{ card.aname }}</h3>
            <p>{{ card.address }}</p>
            <img :src="getImageUrl('food')" class="card-img">
        </el-card>
    </div>

</template>

<style lang="less" scoped>
.nCard{
    height: 200px;
    width: 350px;
    margin-bottom: 20px;
}
.card-item{
    height: 200px;
    width: 350px;
    margin-bottom: 20px;
}


.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.card-item {
    flex: 1 1 calc(33.333% - 16px);
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .card-item {
        flex: 1 1 calc(50% - 16px);
    }
}

@media (max-width: 480px) {
    .card-item {
        flex: 1 1 100%;
    }
}

.card-img{
    width: 110px;
    border-radius: 10px;
    float: right;
}
</style>